<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="800px"
      append-to-body
      :before-close="close"
    >

      <el-tabs type="card" v-model="activeName">
        <el-tab-pane label="基本信息" name="base">
          <el-descriptions :column="2">
            <el-descriptions-item label="关联订单">
              {{ data.orderId }}
            </el-descriptions-item>
            <el-descriptions-item label="状态">
              <dict-tag :options="dict.type.pay_state" :value="form.payState"></dict-tag>
            </el-descriptions-item>
            <el-descriptions-item label="房间">
              {{ form.premisesAddress }}
            </el-descriptions-item>
            <el-descriptions-item label="承租信息">
              {{ form.userName }}
            </el-descriptions-item>
            <el-descriptions-item label="账单周期">
              {{ $moment(form.billStartTime).format('YYYY-MM-DD') }}至{{ $moment(form.billEndTime).format('YYYY-MM-DD') }}
            </el-descriptions-item>
            <el-descriptions-item label="费用/押金">
              {{ form.otherCost }}
            </el-descriptions-item>
            <el-descriptions-item label="违约金">
              {{ form.penalty || 0 }}
            </el-descriptions-item>
            <el-descriptions-item label="最晚付款时间">
              {{ $moment(form.latestPayTime).format('YYYY-MM-DD') }}
            </el-descriptions-item>
            <el-descriptions-item label="支付方式" v-if="form.payMethod">{{
                payMethodText(form.payMethod)
              }}
            </el-descriptions-item>
            <el-descriptions-item label="支付时间" v-if="form.payMethod == 1">
              {{ form.payTime ? $moment(form.payTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
            </el-descriptions-item>
            <el-descriptions-item label="处理凭证" v-if="form.payMethod == 2">
              <el-tag size="small" style="cursor: pointer;" @click="handleVoucherDetail">查看详情</el-tag>
              <!--              <el-button type="text" size="mini" @click="handleVoucherDetail">查看详情</el-button>-->
            </el-descriptions-item>

          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="费用信息" name="item">
          <el-table :data="form.houseBillItemMerges" style="width: 100%">
            <el-table-column label="费用名称" prop="itemName"></el-table-column>
            <el-table-column label="金额（元）" prop="itemPrice"></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <!-- 支付凭证详情弹窗 -->
    <PayVoucher v-model="voucherVisible" :data="form" />
  </div>
</template>

<script>
import { addBillItem, updateBillItem } from '@/api/bill/item'
import { debounce } from '@/utils'
import PayVoucher from '@/views/long-short-rent/bill/houseBill/components/pay-voucher'

export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    title: {
      default: '账单详情'
    },
    data: {
      default: () => ({})
    }
  },
  components: {
    PayVoucher
  },
  dicts: ['pay_state'],
  data() {
    return {
      activeName: 'base', // 选项卡名称
      // 表单参数
      form: {
        payVoucherList: [], // 支付凭证列表,
        houseBillItemMerges: [] // 收费项目列表
      },
      // 支付凭证详情弹窗
      voucherVisible: false,
      // 表单校验
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ] // 名称
      }
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val) // 此处监测showMask目的为关闭弹窗时，重新更换value值，注意emit的事件一定要为input。
      }
    },
    payMethodText() {
      return (value) => {
        let obj = [{ value: 1, label: '线上支付' }, { value: 2, label: '线下处理' }].find(item => item.value == value)
        return obj ? obj.label : ''
      }
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.init()
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    init() {
      this.reset()
    },
    //重置表单
    reset() {
      this.activeName = 'base'
      this.form = {
        billId: undefined, // 项目id
        payVoucherList: [] // 支付凭证列表,
      }
      this.resetForm('form')
      if (this.data.billId) {
        this.form = this.data
        this.form.payVoucherList = this.data.payVoucher ? this.data.payVoucher.split(',') : []
      }
    },
    handleVoucherDetail() {
      this.voucherVisible = true
    },
    close() {
      this.reset()
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  max-height: 80vh !important;
  overflow-y: auto;
}


</style>
